<template>
	<view class="inventory">
		<view class="inventory-main">
			<view class="inventory-main-top">
				<view @click="cli_top('left')" class="inventory-main-top-left font_blod"
					:class="[show_top=='right' ? 'inventory-main-top-back': '']">
					当日预订单
				</view>
				<!-- <view class="inventory-main-top-cen"> -->
				<image class="inventory-main-top-img" :class="[show_top=='right'? 'inventory-main-top-img-back': '']"
					src="https://www.zzzsyh.com/applets/agent/agent/inventory-2.png" mode=""></image>
				<!-- </view> -->
				<view @click="cli_top('right')" class="inventory-main-top-right font_blod"
					:class="[show_top=='left' ? 'inventory-main-top-back': '']">
					历史预订单
				</view>
			</view>
			<view class="inventory-nav" v-if="show_top == 'right'">
				<text class="inventory-nav-txt" @click="cli_nav(item, index)"
					:class="[num_navtxt == index ? 'inventory-nav-txt-ok': '']" v-for="(item, index) of list_nav"
					:key="index">{{item}}</text>
			</view>
			<view class="inventory-list">
				<view class="inventory-list" v-if="list && list.length > 0">
					<view class="inventory-list-li" v-for="(item, index) of list" :key="index">
						<view class="inventory-list-li-one">
							<text class="inventory-list-li-one-txt1 font_blod">{{item.factoryName}}</text>
							<text class="inventory-list-li-one-txt2">{{item.orderState | changeorderState}}</text>
						</view>
						<view class="inventory-list-li-two">
							{{item.createTime}}
						</view>
						<view class="inventory-list-li-three">
							<view class="">
								<image class="inventory-list-li-three-img" src="https://www.zzzsyh.com/applets/agent/agent/address.png"
									mode="">
								</image>
							</view>
							<view class="inventory-list-li-three-right">
								<view class="inventory-list-li-three-right-li">
									<text class="inventory-list-li-three-right-li-left">收件人：</text>
									<text
										class="inventory-list-li-three-right-li-right">{{item.orderName}}{{item.orderPhone}}</text>
								</view>
								<view class="inventory-list-li-three-right-li inventory-list-li-three-right-li-two">
									<text class="inventory-list-li-three-right-li-left">收货地址：</text>
									<text class="inventory-list-li-three-right-li-right">{{item.orderAddress}}</text>
								</view>
							</view>
						</view>
						<view class="inventory-list-li-four">
							<view class="inventory-list-li-four-left">
								<text class="inventory-list-li-four-left-txt1">合计:</text>
								<text class="inventory-list-li-four-left-txt3">￥</text>
								<text class="inventory-list-li-four-left-txt2 font_blod"
									v-if="item.orderState == 3 || item.orderState == 4">{{item.orderEndMoney}}</text>
								<text class="inventory-list-li-four-left-txt2 font_blod" v-else>{{item.orderBeginMoney}}</text>
							</view>
							<view class="">
								<view class="inventory-list-li-four-right font_blod" @click="cli_goDetails(item)">
									<text v-if="item.orderState == 3 || item.orderState == 4">发货详情</text>
									<text v-else>预订详情</text>
								</view>
							</view>
						</view>
						<view class="inventory-list-li-five">

						</view>
					</view>
				</view>
				<view v-else class="inventory-list-none">
					<view class="yPopNone">
						<image class="yPopNoneImg" src="https://www.zzzsyh.com/applets/agent/factory/23.png" mode="">
						</image>
						<view class="yPopNoneTxt">
							暂无订单~
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				agentId: uni.getStorageSync('agentId'),
				show_top: 'left',
				list: [],
				list_nav: ['待接单', '已接单', '已发货', '已结算'],
				num_navtxt: '0',
				orderState: '0', // 订单状态
			}
		},
		onShow() {
			this.getReserveOrderList()
		},
		mounted() {

		},
		methods: {
			onReachBottom(e) {
				console.log(e);
			},
			// 点击头部切换
			cli_top(val) {
				this.show_top = val
				if (val == 'left') {
					this.orderState = '0'
					this.num_navtxt = '0'
					this.list = []
					this.getReserveOrderList()
				} else if (val == 'right') {
					this.list = []
					this.getReserveOrderList()
				}
			},
			// 点击nav切换
			cli_nav(item, index) {
				this.num_navtxt = index
				this.orderState = Number(index + 1)
				this.getReserveOrderList()
			},
			// 去详情
			cli_goDetails(item) {
				uni.navigateTo({
					url: '/pages/inventoryDetails/inventoryDetails?id=' + item.id
				});
			},
			// 获取列表
			getReserveOrderList() {
				let val = this.show_top
				let type = val == 'left' ? 1 : 2
				console.log(1111, type);
				uni.request({
					url: allapi.getReserveOrderList,
					data: {
						agentId: this.agentId,
						type: type,
						orderState: this.orderState
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.list = dat
						// this.list = dat.slice(0, 20)
						// let num = Math.ceil(dat.length / 10)
						// console.log('num的数量',num);
						// let si = 0
						// let listAll = []
						// for (let i = 1; i < num ; i++) {
						// 	listAll.push(dat.slice(0, 10*i))
						// 	console.log(77777, listAll);
						// }
						// this.list = listAll
						// // this.list = dat.slice(0, 10)
						// console.log(666666,this.list);
					}
				})
			}
		},
		filters: {
			changeorderState(val) {
				if (val == 0) {
					return '已取消'
				} else if (val == 1) {
					return '待接单'
				} else if (val == 2) {
					return '已接单'
				} else if (val == 3) {
					return '已发货'
				} else if (val == 4) {
					return '已结算'
				}
			}
		}
	}
</script>

<style scoped>
	.inventory {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;

	}

	.inventory-main {
		margin: 24rpx;
		height: 100%;
		background: #FFFFFF;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.inventory-main-top {
		display: flex;
		align-items: center;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.inventory-main-top-left {
		flex: 1;
		text-align: center;
	}

	.inventory-main-top-cen {
		width: 48rpx;
		height: 72rpx;
		background: red;
		position: relative;
	}

	.inventory-main-top-img {
		width: 48rpx;
		height: 72rpx;
		left: 0;
		top: 0;
	}

	.inventory-main-top-img-back {
		transform: rotateY(180deg);
	}

	.inventory-main-top-right {
		flex: 1;
		text-align: center;

	}

	.inventory-main-top-back {
		background: #E0E6E4;
		color: #999999;
	}

	.inventory-nav {
		display: flex;
		justify-content: space-around;
		margin: 32rpx 18rpx;
	}

	.inventory-nav-txt {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		padding: 8rpx 20rpx;
		border-radius: 28rpx;
	}

	.inventory-nav-txt-ok {
		color: #FFFFFF;
		background: #28CD50;
	}

	.inventory-list {
		flex: 1;
		overflow: auto;
	}

	.inventory-list-none {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.inventory-list-li {
		padding: 32rpx 0rpx;
		margin: 0 16rpx;
		border-bottom: 2rpx solid #AAAAAA;
	}

	.inventory-list-li-one {
		display: flex;
		justify-content: space-between;
		height: 44rpx;
		line-height: 44rpx;
	}

	.inventory-list-li-one-txt1 {
		font-size: 32rpx;
		color: #333333;
	}

	.inventory-list-li-one-txt2 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.inventory-list-li-two {
		height: 40rpx;
		line-height: 40rpx;
		margin-top: 8rpx;
		margin-bottom: 16rpx;
		font-size: 28rpx;
		color: #999999;
		font-weight: 400;
	}

	.inventory-list-li-three {

		background: #F3F5F6;
		/* min-height: 124rpx; */
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 24rpx 14rpx;
	}

	.inventory-list-li-three-img {
		width: 31rpx;
		height: 32rpx;
	}

	.inventory-list-li-three-right {
		margin-left: 10rpx;
	}

	.inventory-list-li-three-right-li {
		display: flex;
		line-height: 34rpx;
	}

	.inventory-list-li-three-right-li-two {
		margin-top: 8rpx;
	}

	.inventory-list-li-three-right-li-left {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.inventory-list-li-three-right-li-right {
		flex: 1;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.inventory-list-li-four {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.inventory-list-li-four-left {
		height: 50rpx;
		display: flex;
		align-items: center;
	}

	.inventory-list-li-four-left-txt1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.inventory-list-li-four-left-txt2 {
		font-size: 36rpx;
		color: #EF691C;
	}

	.inventory-list-li-four-left-txt3 {
		font-size: 28rpx;
		color: #EF691C;
	}

	.inventory-list-li-four-right {
		width: 164rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 34rpx;
		border: 2rpx solid #333333;
		text-align: center;
		color: #333333;
		font-size: 24rpx;
	}
</style>
